import {View, Button, Text, Image} from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, {Component} from 'react';
import * as T from '../types';
import './topBox.less';
import actions from '../actions/index';
import {connect} from 'react-redux';
import moment from 'dayjs';
import {store2Props} from '../selectors';
import 'taro-ui/dist/style/components/icon.scss';
import topBox1 from '@/assets/image/my/topBox_1.png';
import topBox2 from '@/assets/image/my/topBox_2.png';
import topBox3 from '@/assets/image/my/topBox_3.png';
import topBox4 from '@/assets/image/my/topBox_4.png';
import vipBg from '@/assets/image/userCenterPage/vipBg.png';
const orderData = [
  {
    title: '优惠券',
    img: topBox1,
    type: 'myCoupon',
    url: '/pages/package-A/customer/my-coupon/index',
  },
  {
    title: '积分兑换',
    img: topBox2,
    type: 'myCoupon',
    url: '/pages/package-B/integral-goods/index',
  },
  {
    title: '权益中心',
    img: topBox3,
    type: 'Equities',
    // url: '/pages/package-A/benefitsPage/index',
    url: '/pages/package-D/serviceCentre/index',
  },
  {
    title: '任务中心',
    img: topBox4,
    type: 'myCoupon',
    url: '/pages/package-A/taskCenter/index',
  },
];

type ICenterBoxProps = T.IProps & T.ICenterBoxProps;
//@ts-ignore
@connect<Partial<ICenterBoxProps>, T.ICenterBoxState>(store2Props, actions)
export default class Info extends Component<Partial<ICenterBoxProps>, T.ICenterBoxState> {
  constructor(props: ICenterBoxProps) {
    super(props);
  }

  // 工具栏
  getToolsBox(listData) {
    let {
      actions: {action},
    } = this.props;
    let toolsView = [];
    listData.map((item, index) => {
      toolsView.push(
        <View
          className="item"
          onClick={() => {
            if (Taro.getStorageSync('blacklistModel')) {
              action.commonChange('main.blacklistModel', true);
              return;
            }
            this.itemClick(item);
          }}
        >
          <Image className="img" src={item.img} mode="widthFix" />
          <Text className="title">{item.title}</Text>
        </View>,
      );
    });
    return toolsView;
  }

  async itemClick(item) {
    if (item.type === 'Equities') {
      let {
        main: {
          isAquamarineMember, //是否蓝晶会员标志 false：否，true：是
          isCrystalMember, //是否赤晶会员标志 false：否，true：是
        },
        actions: {action},
      } = this.props;
      let memberType = 1;
      if (isAquamarineMember) memberType = 0;
      if (isCrystalMember) memberType = 1;
      if (isCrystalMember && isAquamarineMember) memberType = 2;
      Taro.navigateTo({
        url: `${item.url}?memberType=${memberType}`,
      });
    } else {
      Taro.navigateTo({
        url: item.url,
      });
    }
  }

  render() {
    let {
      main: {
        isAquamarineMember, //是否蓝晶会员标志 false：否，true：是
        isCrystalMember, //是否赤晶会员标志 false：否，true：是
        memberDays, //已成为会员多少天-会员时才会展示，非会员无需展示
        endTime, //会员有效期至
        dualMembershipCardNumber, //双会员卡号
        aquamarineMembershipCardNumber, //蓝晶会员卡号
        crystalMembershipCardNumber, //赤晶会员卡号
      },
      actions: {action},
    } = this.props;
    return (
      <View className="PageTopBoxBox">
        {isAquamarineMember || isCrystalMember ? (
          //现在是会员状态
          <>
            {
              //过期时间<=5天
              endTime && moment(endTime).diff(moment(new Date()).format('YYYY-MM-DD'), 'day') <= 5 ? (
                <View className="vipBg" style={{backgroundImage: `url(${vipBg})`}}>
                  <View className="bgBox">
                    <View className="title">您的会员将于 {endTime} 到期</View>
                    <View className="btnBox">
                      <View
                        className="btn"
                        onClick={() => {
                          if (Taro.getStorageSync('blacklistModel')) {
                            action.commonChange('main.blacklistModel', true);
                            return;
                          }
                          Taro.navigateTo({url: '/pages/package-A/renewalMember/index'});
                        }}
                      >
                        立即续费
                      </View>
                    </View>
                  </View>
                </View>
              ) : (
                <View style={{height: '30rpx'}}></View>
              )
            }
          </>
        ) : dualMembershipCardNumber || aquamarineMembershipCardNumber || crystalMembershipCardNumber ? (
          //曾经开通过会员，已过期
          <>
            <View className="vipBg" style={{backgroundImage: `url(${vipBg})`}}>
              <View className="bgBox">
                <View className="title" style={{fontSize: '28rpx'}}>
                  会员已过期
                </View>
                <View className="title">权益升级等你回归</View>
                <View className="btnBox">
                  <View
                    className="btn"
                    onClick={() => {
                      if (Taro.getStorageSync('blacklistModel')) {
                        action.commonChange('main.blacklistModel', true);
                        return;
                      }
                      Taro.navigateTo({url: '/pages/package-A/memberOpen/index'});
                    }}
                  >
                    立即开通
                  </View>
                </View>
              </View>
            </View>
          </>
        ) : (
          //普通用户未开通过会员
          <>
            <View className="vipBg" style={{backgroundImage: `url(${vipBg})`}}>
              <View className="bgBox">
                <View className="title" style={{fontSize: '28rpx'}}>
                  会员开通
                </View>
                <View className="title">专属权益领取</View>
                <View className="btnBox">
                  <View
                    className="btn"
                    onClick={() => {
                      if (Taro.getStorageSync('blacklistModel')) {
                        action.commonChange('main.blacklistModel', true);
                        return;
                      }
                      Taro.navigateTo({url: '/pages/package-A/memberOpen/index'});
                    }}
                  >
                    开通会员
                  </View>
                </View>
              </View>
            </View>
          </>
        )}
        <View className="bottomBox">
          <View className="orderBox">{this.getToolsBox(orderData)}</View>
        </View>
      </View>
    );
  }
}

//create by moon https://github.com/creasy2010/moon
